import { useDark } from '@vueuse/core';
const isDark = useDark();

/**
 * Tracker Bar 的 label 颜色
 * @returns 
 */
export const labelColor = () => {
  return isDark.value ? '#CDCDCD' : '#202020';
}

/**
 * Tracker Bar 的 label 中 时间标签的颜色
 * @returns 
 */
export const labelIntervalColor = () => {
  return isDark.value ? '#9F7C1AD2' : '#F8D36DB3';
}

/**
 * Bar 的颜色
 * @param key 
 * @returns 
 */
export const barStyle = (key: string): any => {
  if (key == 'HTTP_OKHTTP') {
    return isDark.value ? linearColor('#905c28', '#454776') : linearColor('#ee9943', '#8689e3');
  }
  if (key == 'HTTP_OKHTTP_INVOKE') {
    return isDark.value ? linearColor('#454776', '#905c28') : linearColor('#8689e3', '#ee9943');
  }
  if (key == 'ELASTIC_SEARCH') {
    return isDark.value ? linearColor3('#009188', '#147eb7', '#aa840d') : linearColor3('#00bfb3', '#1ba9f5', '#fec514');
  }
  if (key == 'SPRING_ASYNC') {
    return isDark.value ? linearColor('#9ECB2182', '#A47B00') : linearColor('#9dcb21', '#d2b354');
  }
  if (key == 'HTTP_GATEWAY') {
    return isDark.value ? linearColor('#008610', '#003506') : linearColor('#5DCB6A', '#00780d');
  }
  if (key == 'ANNOTATION') {
    return isDark.value ? { color: '#A47B00' } : { color: '#d2b354' }
  }
  if (key == 'HTTP_GATEWAY_INVOKE' || key == 'HTTP_MVC') {
    return isDark.value ? { color: '#9ECB2182' } : { color: '#9dcb21' }
  }
  if (key == 'HTTP_FEIGN_INVOKE') {
    return isDark.value ? { color: '#66C85561' } : { color: '#66c855' }
  }
  if (key == 'REDIS') {
    return isDark.value ? { color: '#aa4d45' } : { color: '#ce6a60' }
  }
  if (key == 'MYSQL') {
    return isDark.value ? { color: '#005572' } : { color: '#66b5cb' }
  }
  if (key == 'OTHER') {
    return isDark.value ? { color: '#525252' } : { color: '#C1C1C1' }
  }
  if (key == 'VIRTUAL_ROOT_SPAN') {
    return isDark.value ? { color: '#525252' } : { color: '#929292' }
  }
  // 占位符的样式
  if (key == 'PLACEHOLDER') {
    return isDark.value ?
      { color: '#000000', borderColor: '#e2e2e2', borderWidth: 2 } :
      { color: '#e5e5e5', borderColor: '#000000', borderWidth: 1 }
  }
  // 非选中应用的隐藏样式
  if (key == 'IGNORE') {
    return isDark.value ?
      { color: '#1E1E1E', labelColor: '#131313', borderWidth: 0, labelRichIntervalColor: '#1414140A' } :
      { color: '#F3F3F3', labelColor: '#D6D6D6', borderWidth: 0, labelRichIntervalColor: '#1414140A' }
  }
};

const linearColor = (offset0: string, offset1: string): any => {
  return {
    color: {
      type: 'linear', x: 0, y: 0, x2: 1, y2: 1,
      colorStops: [{ offset: 0, color: offset0 }, { offset: 1, color: offset1 }]
    }
  }
}

const linearColor3 = (offset00: string, offset05: string, offset10: string): any => {
  return {
    color: {
      type: 'linear', x: 0, y: 0, x2: 1, y2: 1,
      colorStops: [{ offset: 0, color: offset00 }, { offset: 0.5, color: offset05 }, { offset: 1, color: offset10 }]
    }
  }
}